<style scoped lang="scss">
.content {
  display: flex;
  justify-content: space-between;
  background: #fff;
  align-items: center;

  .icon {
    font-size: 30px;
    margin: 10px;
  }

  .span1 {
    font-size: 20px;
    margin: 10px;
    color: #3087ea;
    margin-left: 25px;
  }

  .span2 {
    font-size: 20px;
    margin: 10px;
    margin-left: 25px;
  }

  .span3 {
    font-size: 12px;
    margin: 10px;
    margin-left: 25px;
  }
}
</style>
<template>
  <van-sticky>
    <div class="content">
      <van-icon v-if="showicon1" class="icon" @click="onicon1" name="arrow-left" />
      <span v-if="showspan1" class="span1">主要业务</span>
      <span v-if="showspan2" class="span2">历史问诊</span>
      <span v-if="showspan4" class="span2">问诊列表</span>
      <span v-if="showspan5" class="span2">我的礼物</span>
      <van-icon v-if="showicon2" class="icon" @click="oncion2" name="bell" />
      <span v-if="showspan3" class="span3" @click="onli">收到的礼物</span>
    </div>
  </van-sticky>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()
// 点击跳转
const onicon1 = () => {
  router.go(-1)
}
const oncion2 = () => {
  router.push('/mymessage')
}
const onli = () => {
  router.push('/giftlist')
}
defineProps({
  showicon1: {
    type: Boolean,
    default: true
  },
  showicon2: {
    type: Boolean,
    default: true
  },
  showspan1: {
    type: Boolean,
    default: false
  },
  showspan2: {
    type: Boolean,
    default: false
  },
  showspan3: {
    type: Boolean,
    default: false
  },
  showspan4: {
    type: Boolean,
    default: false
  },
  showspan5: {
    type: Boolean,
    default: false
  }
})
</script>
